
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算信息" />
      <a-step title="费率配置" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 主体信息  -->
    <a-form
            v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
            ref="stepForm1Ref"
            style="margin-top: 20px;"
            :model="applymentDetailInfo"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8 }"
            :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础项</a-divider>
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" @change="changeMerchantType">
          <a-radio :value="1">小微商户</a-radio>
          <a-radio :value="2">个体商户</a-radio>
          <a-radio :value="3">企业商户</a-radio>
        </a-radio-group>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>

        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" :imgSize="2" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
        </a-form-item>

        <a-form-item label="营业执照编号" name="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </a-form-item>

        <a-form-item label="营业执照注册地址" name="licenseAddress">
          <a-input v-model:value.trim="applymentDetailInfo.licenseAddress" />
        </a-form-item>

        <a-form-item label="营业执照起始有效期" name="licenseEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectBegin" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="营业执照有效期截止" name="licenseEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>

      <a-form-item :label="applymentDetailInfo.merchantType === 1?'商户名称':'营业执照名称'" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
      </a-form-item>

      <a-form-item label="备注信息" name="remark">
        <a-input v-model:value.trim="applymentDetailInfo.remark" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法定代表人证件</a-divider>

      <a-form-item label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" :imgSize="2" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" :imgSize="2" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="法人手持身份证照片" name="idcardInHandImg">
        <JeepayUpload v-model:src="applymentDetailInfo.idcardInHandImg" :imgSize="2" bizType="applyment" />
      </a-form-item>

      <a-form-item label="法人身份证姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
      </a-form-item>

      <a-form-item label="法人身份证号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
      </a-form-item>

      <a-form-item label="法人地址" name="idcardAddress">
        <a-input v-model:value.trim="applymentDetailInfo.idcardAddress" />
      </a-form-item>

      <a-form-item label="法人手机号" name="legalPersonPhone">
        <a-input v-model:value.trim="applymentDetailInfo.legalPersonPhone" />
      </a-form-item>

      <a-form-item label="法人身份证起始有效期" name="idcardEffectBegin">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectBegin" />
      </a-form-item>

      <a-form-item class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>

      <template v-if="applymentDetailInfo.merchantType == 3">
        <a-button
                class="jeepay-m-btn"
                data-type="text"
                style="margin-left:35px"
                size="small"
                type="primary"
                @click="addCompanyBeneficiaryListFunc"
        >
          <plus-outlined />新增企业受益人卡片
        </a-button>
      </template>
      <template v-if="applymentDetailInfo.merchantType == 3 && applymentDetailInfo.companyBeneficiaryList">
        <a-card v-for="(item, i) in applymentDetailInfo.companyBeneficiaryList" :key="i" class="jeepay-card-wx" style="margin:35px;">
          <template #title>
            <div style="display:flex;justify-content: space-between;">
              <span>企业受益人信息[{{ i+1 }}]</span>
              <div>
                <a-button style="margin-right:20px" size="small" type="primary" @click="useBizCompanyBeneficiaryFunc(i)"><partition-outlined />设置法人为受益人</a-button>
                <template v-if="(!applymentDetailInfo.owner && applymentDetailInfo.companyBeneficiaryList.length > 1) || applymentDetailInfo.owner">
                  <a-button class="jeepay-m-btn" data-type="text" size="small" type="danger" @click="delCompanyBeneficiaryListFunc(i)"><delete-outlined />删除该企业受益人卡片</a-button>
                </template>
              </div>
            </div>
          </template>


          <div style="padding-top:20px">
            <a-form-item label="受益人身份证人像面照片" :name="`companyBeneficiaryListIdcard1Img_${i}`">
              <JeepayUpload v-model:src="item.idcard1Img" bizType="applyment" :imgSize="2" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
            </a-form-item>

            <a-form-item label="受益人身份证国徽面照片" :name="`companyBeneficiaryListIdcard2Img_${i}`">
              <JeepayUpload v-model:src="item.idcard2Img" bizType="applyment" :imgSize="2" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
            </a-form-item>

            <a-form-item label="受益人身份证姓名" :name="`companyBeneficiaryListIdcardName_${i}`">
              <a-input v-model:value.trim="item.idcardName" />
            </a-form-item>

            <a-form-item label="受益人身份证号" :name="`companyBeneficiaryListIdcardNo_${i}`">
              <a-input v-model:value.trim="item.idcardNo" />
            </a-form-item>

            <a-form-item label="受益人身份证起始有效期" :name="`companyBeneficiaryListIdcardEffectBegin_${i}`">
              <a-input v-model:value.trim="item.idcardEffectBegin" />
            </a-form-item>

            <a-form-item class="jeepay-valid" label="受益人身份证结束有效期" :name="`companyBeneficiaryListIdcardEffectEnd_${i}`">
              <a-input v-model:value.trim="item.idcardEffectEnd" :disabled="item.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
              <a-checkbox :checked="item.idcardEffectEnd == '长期' " @change="(e : any) => item.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
            </a-form-item>

            <a-form-item label="受益人身份证居住地址" :name="`companyBeneficiaryListIdcardAddress_${i}`">
              <a-input v-model:value.trim="item.idcardAddress" />
            </a-form-item>
          </div>
        </a-card>
      </template>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
            v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
            ref="stepForm2Ref"
            :model="applymentDetailInfo"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8 }"
            :rules="vdata.step2Rules"
    >
      <a-form-item label="经营类目（MCC）" name="mccCode">
        <JeepayMccSelect v-model:value="applymentDetailInfo.mccCode" @change="changeMccFunc" />
      </a-form-item>

      <a-form-item label="客户经理姓名" name="cusMgrNm">
        <a-input v-model:value.trim="applymentDetailInfo.cusMgrNm" />
      </a-form-item>

      <!-- <a-form-item v-if="applymentDetailInfo.merchantType !== 1" label="实际控制人姓名" name="actualManager">
        <a-input v-model:value.trim="applymentDetailInfo.actualManager" />
      </a-form-item> -->

      <a-form-item label="是否为法人（自动补全）" name="isLegalInfo">
        <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo" @change="funLegalInfo(applymentDetailInfo.isLegalInfo)">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="商户联系人姓名" name="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" />
      </a-form-item>

      <a-form-item label="商户联系人手机号" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-form-item label="商户联系人邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>


      <a-form-item label="商户经营省市县" name="areaCode">
        <JeepayAreaSelectYs v-model:value="applymentDetailInfo.areaCode" @change="changeMchAreaFunc" />
      </a-form-item>

      <a-form-item label="商户经营地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" :imgSize="2" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" :imgSize="2" />
      </a-form-item>

      <a-form-item label="收银台照" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" :imgSize="2" />
      </a-form-item>
    </a-form>

    <!-- 3. 结算账户  -->
    <a-form
            v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
            ref="stepForm3Ref"
            :model="applymentDetailInfo"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8 }"
            :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账户信息</a-divider>

      <a-form-item label="结算账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="() => emit('itemRender')">
          <a-radio value="C">对私</a-radio>
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B">对公</a-radio>
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B2">对公存折</a-radio>
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="D">单位结算卡</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="结算账户类型" name="settType">
        <a-radio-group v-model:value="applymentDetailInfo.settType" @change="() => emit('itemRender')">
          <a-radio value="1">T1</a-radio>
          <a-radio value="2">D1</a-radio>
          <a-radio value="3">D0</a-radio>
        </a-radio-group>
        <div v-if="applymentDetailInfo.settType != '1'">
          <span v-if="applymentDetailInfo.settType == '2' && vdata.feeConfig.day1RateFee" class="jeepay-tip-text">垫资费说明：费率{{ vdata.feeConfig.day1RateFee }} %，最低收费{{ vdata.feeConfig.day1RateBottom }}元</span>
          <span v-if="applymentDetailInfo.settType == '3' && vdata.feeConfig.day0RateFee" class="jeepay-tip-text">垫资费说明：费率{{ vdata.feeConfig.day0RateFee }} %，最低收费{{ vdata.feeConfig.day0RateBottom }}元</span>
        </div>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType != 'C'">
        <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" :imgSize="2" />
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item label="结算银行卡正面照片" name="settAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" :imgSize="2" ocrType="bankCard" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
        </a-form-item>

        <a-form-item label="结算银行卡反面照片" name="settAccountBankImg2">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountBankImg2" bizType="applyment" :imgSize="2" />
        </a-form-item>
      </div>

      <a-form-item v-if="applymentDetailInfo.settAccountType != 'C'" label="结算开户名" name="diySettAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.diySettAccountName" />
        <span class="jeepay-tip-text">（对公或非结算人结算开户名，不为空时结算户名以此为准）</span>
      </a-form-item>

      <a-form-item label="结算银行卡账号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>

      <a-form-item label="开户行省市县" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelectYs v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" />
      </a-form-item>

      <a-form-item label="开户支行联行号" name="bankSubCode">
        <a-input v-model:value.trim="applymentDetailInfo.bankSubCode" />
        <span class="jeepay-tip-text">(填写银行卡号并且选择开户行省市县后将展开支行列表)</span>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>
      <a-form-item label="是否法人结算" name="isUncrpSett">
        <a-radio-group v-model:value="applymentDetailInfo.isUncrpSett" @change="() => emit('itemRender')">
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="Y">非法人</a-radio>
          <a-radio value="N">法人</a-radio>
        </a-radio-group>
      </a-form-item>

      <div v-if="applymentDetailInfo.isUncrpSett == 'Y'">
        <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" :imgSize="2" ocrType="idCard" @ocrScan="ocrScanSettFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="结算人身份证国徽面照片" name="settAccountIdcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" :imgSize="2" ocrType="idCard" @ocrScan="ocrScanSettFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>

        <a-form-item label="结算人开户名" name="settAccountName">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
          <span class="jeepay-tip-text">如：张三</span>
        </a-form-item>

        <a-form-item label="结算人身份证号" name="settAccountIdcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardNo" />
        </a-form-item>

        <a-form-item label="结算人身份证起始有效期" name="settAccountIdcardEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectBegin" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="结算人身份证结束有效期" name="settAccountIdcardEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectEnd" :disabled="applymentDetailInfo.settAccountIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.settAccountIdcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>

        <a-form-item label="结算人身份证地址" name="settleAuthAddress">
          <a-input v-model:value.trim="applymentDetailInfo.settleAuthAddress" />
        </a-form-item>

        <a-form-item label="结算授权书" name="settleAuthLetterPhoto">
          <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterPhoto" bizType="applyment" :imgSize="2" />
          <span class="jeepay-tip-text">(上传图片)</span>
        </a-form-item>

        <a-form-item label="法人手持结算授权书" name="settleAuthLetterHandlePhoto">
          <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterHandlePhoto" bizType="applyment" :imgSize="2" />
        </a-form-item>
      </div>

      <a-form-item v-if="applymentDetailInfo.isUncrpSett == 'Y'" label="银行预留手机号" name="bankMobile">
        <a-input v-model:value.trim="applymentDetailInfo.bankMobile" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">备用结算账户</a-divider>
      <a-form-item label="是否添加备用结算账户" name="isOtherAccountInfo">
        <a-radio-group v-model:value="applymentDetailInfo.isOtherAccountInfo" @change="() => emit('itemRender')">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <div v-if="applymentDetailInfo.isOtherAccountInfo == '1'">
        <a-form-item label="备用结算账户类型" name="standByStlAccType">
          <a-radio-group v-model:value="applymentDetailInfo.standByStlAccType" @change="() => emit('itemRender')">
            <a-radio value="C">对私</a-radio>
            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B">对公</a-radio>
            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B2">对公存折</a-radio>
            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="D">单位结算卡</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="备用结算账户正面照" name="standByStlAccCardImg">
          <JeepayUpload v-model:src="applymentDetailInfo.standByStlAccCardImg" bizType="applyment" :imgSize="2" ocrType="bankCard" @ocrScan="ocrStandByStlAccCardImgFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
        </a-form-item>

        <a-form-item label="备用结算户名" name="standByStlAccNm">
          <a-input v-model:value.trim="applymentDetailInfo.standByStlAccNm" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="备用结算账号" name="standByStlAccNo">
          <a-input v-model:value.trim="applymentDetailInfo.standByStlAccNo" />
        </a-form-item>

        <a-form-item label="备用结算账户银行开户行省市县" name="settOtherAccountBankBranchAreaCode">
          <JeepayAreaSelectYs v-model:value="applymentDetailInfo.settOtherAccountBankBranchAreaCode" @change="changeSettOtherAccountBankBranchAreaCodeFunc" />
        </a-form-item>

        <a-form-item label="备用结算账户开户行支行编号" name="standByBankSubCode">
          <a-input v-model:value.trim="applymentDetailInfo.standByBankSubCode" />
          <span class="jeepay-tip-text">(填写备用结算账号并且选择开户行省市县后将展开支行列表)</span>
        </a-form-item>
      </div>
    </a-form>

    <!-- 4. 费率配置  -->
    <a-form
            v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
            ref="stepForm4Ref"
            :model="applymentDetailInfo"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 16 }"
            :rules="vdata.step4Rules"
    >
      <div label="配置费率" name="fee" style="width:100%;">
        <JeepayPaywayRatePanel
                ref="jeepayPaywayRatePanelRef"
                :configMode="configMode"
                :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo"
                :selectIfCode="mchApplymentData.ifCode"
                onlyRate="true"
        />
      </div>
    </a-form>

    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 4" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

  import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
  import { $bankBranchList, $getParamsIsvToBack } from '@/api/manage'
  import ruleGenerator from '@/utils/ruleGenerator'

  // 获取当前实例的代理对象
  const { proxy } : any = getCurrentInstance()

  const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

  const jeepayPaywayRatePanelRef = ref()

  // 显示类型枚举值
  const showStyleEnum = {
    step: 'step',
    block: 'block'
  }

  // emit： 向父组件进行通讯。
  const emit = defineEmits(['itemRender'])

  // 参数注入： 是否手机端
  let isMobile : any = inject('isMobile')

  // 响应式数据
  const vdata : any = reactive({
    showStyle: 'step', // 显示类型： step-分步,  block-整页显示
    steps: ['主体信息', '经营信息', '结算信息'],
    isTempData: false, // 是否保存草稿
    payWayFee : '未设置',
    currentStep: 1,
    bankInfoList: [],
    initBankInfoList: [],
    step1Rules: {
      merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
      licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
      licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
      licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照起始有限期'), ruleGenerator.dateOrForever ],
      licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照截止有限期'), ruleGenerator.dateOrForever ],
      mchFullName: [ ruleGenerator.requiredInput('商户名称') ],
      idcardName: [ ruleGenerator.requiredInput('身份证中的姓名') ],
      idcardNo: [ ruleGenerator.requiredInput('身份证号') ],
      idcardAddress: [ ruleGenerator.requiredInput('法人地址') ],
      legalPersonPhone: [ ruleGenerator.requiredInput('法人电话') ],
      idcardEffectBegin: [ ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date ],
      idcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],
      idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
      idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
      licenseAddress: [ ruleGenerator.requiredInput('营业执照注册地址') ],
    },
    step2Rules: {
      mccCode: [ ruleGenerator.requiredSelect('行业') ],
      mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
      contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
      contactPhone: [ ruleGenerator.requiredInput('联系人电话') ],
      contactEmail: [ ruleGenerator.requiredInput('联系人邮箱') ],
      cusMgrNm: [ ruleGenerator.requiredInput('客户经理姓名') ],
      areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
      address: [ ruleGenerator.requiredInput('经营地址') ],
      merBusiContent: [ ruleGenerator.requiredSelect('经营内容') ],
      storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
      storeInnerImg: [ ruleGenerator.requiredUpload('店内环境照') ],
      storeCashierImg: [ ruleGenerator.requiredUpload('收银台照') ],
    },
    step3Rules: {
      isUncrpSett: [ ruleGenerator.requiredSelect('是否法人结算') ],
      settAccountType: [ ruleGenerator.requiredSelect('结算账户类型') ],
      settType: [ ruleGenerator.requiredSelect('结算方式') ],
      settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
      settAccountName: [ ruleGenerator.requiredInput('开户名') ],
      settAccountBankName: [ ruleGenerator.requiredInput('银行名称') ],
      bankType: [ ruleGenerator.requiredInput('开户行编号') ],
      openAccBanktype: [ ruleGenerator.requiredInput('开户行行号') ],
      bankMobile: [ ruleGenerator.requiredInput('预留手机号') ],
      settAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('支行地区', 'array') ],
      settAccountBankBranchName: [ ruleGenerator.requiredInput('开户支行名称') ],

      settAccountIdcard1Img: [ ruleGenerator.requiredUpload('结算人身份证人像面照片') ],
      settAccountIdcard2Img: [ ruleGenerator.requiredUpload('结算人身份证国徽面照片') ],
      settleAuthLetterPhoto: [ ruleGenerator.requiredUpload('结算授权书') ],
      settleAuthLetterHandlePhoto: [ ruleGenerator.requiredUpload('法人手持结算授权书') ],
      settAccountIdcardNo: [ ruleGenerator.requiredInput('结算人身份证号') ],
      settleAuthAddress: [ ruleGenerator.requiredInput('结算人身份证地址') ],
      settAccountIdcardEffectBegin: [ ruleGenerator.requiredInput('结算人身份证有效期开始时间') ],
      settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('结算人身份证有效期截止时间') ],
      settAccountLicenseImg: [ ruleGenerator.requiredUpload('银行卡正面照') ],
      settAccountBankImg2: [ ruleGenerator.requiredUpload('银行卡反面照') ],
      companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],

      isOtherAccountInfo: [ ruleGenerator.requiredSelect('是否添加备用结算账户') ],
      standByStlAccType: [ ruleGenerator.requiredSelect('备用结算账户类型') ],
      standByStlAccCardImg: [ ruleGenerator.requiredUpload('备用结算账户正面照') ],
      standByStlAccNm: [ ruleGenerator.requiredInput('备用结算户名') ],
      standByStlAccNo: [ ruleGenerator.requiredInput('备用结算账号') ],
      settOtherAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('备用结算账户银行开户行省市县', 'array') ],
      standByBankSubCode: [ ruleGenerator.requiredSelect('备用结算账户开户行支行编号') ],
    },
    feeConfig: {} as any,
  })

  // 接收进件参数（包含 商户号， ifCode ）
  let mchApplymentDataRef : any = inject('mchApplymentData')
  let mchApplymentData : any = mchApplymentDataRef.value

  // 接收父组件的进件详细参数
  let applymentDetailInfoInject : any = inject('applymentDetailInfo')
  let applymentDetailInfo : any = applymentDetailInfoInject.value

  // 参数注入： 配置方式
  let configMode : any = inject('configMode')


  // 获取地区信息
  /* function changeAreaCodeFunc(e) {
    $getAreaCodeList(mchApplymentData.mchNo, mchApplymentData.ifCode, e ? { cityCode: e[1].value, bankAliasCode: applymentDetailInfo.bankAliasCode } : undefined).then((res) => {
      vdata.bankBranchList = res
      applymentDetailInfo.settAccountBankBranchName = ''
    })
  } */
  // changeAreaCodeFunc(undefined)

  // 下一步
  function toNextStep() {
    // 验证是否通过
    proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
    })
  }

  // 上一步
  function toPrevStep(){
    vdata.currentStep --
  }

  function validateAllForm(step: number){
    return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
      if(step >= 3){
        return Promise.resolve()
      }
      return validateAllForm(++step)

    })
  }

  // 切换商户类型
  function changeMerchantType() {
    if (applymentDetailInfo.merchantType == 1) {
      return
    }
  }

  // 图片识别的回调函数
  function ocrScanFunc(orcObject: any){
    if(orcObject){
      orcObject.settAccountBankName = applymentDetailInfo.settAccountBankName
      Object.assign(applymentDetailInfo, orcObject)
    }
  }

  // 结算人身份证  图片识别的回调函数
  function ocrScanSettFunc(orcObject: any){
    if(orcObject && orcObject.idcardName){
      applymentDetailInfo.settAccountName = orcObject.idcardName
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
      applymentDetailInfo.settleAuthAddress = orcObject.idcardAddress
    }
    if(orcObject && orcObject.idcardEffectBegin){
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }

  // 备用结算银行卡  图片识别的回调函数
  function ocrStandByStlAccCardImgFunc(orcObject: any){
    if(orcObject){
      applymentDetailInfo.standByStlAccNo = orcObject.settAccountNo
    }
  }

  // 图片识别的回调函数
  function ocrScanFuncByCompanyBeneficiary(orcObject, i){
    if(orcObject){
      Object.assign(applymentDetailInfo.companyBeneficiaryList[i], orcObject)
    }
  }

  // 点击【保存】的前置事件, 需要返回Promise对象
  function saveDataPreCallback(isTemp){
    // 判断下： 是否包含该组件， 若没有该组件（比如分账模式下）， 则无需获取此费率数据
    if(jeepayPaywayRatePanelRef.value){

      // 放置费率配置项
      let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
      if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
      }

      // 赋值到对象中
      applymentDetailInfo.reqPaywayFeeList = paywayFeeList
    }

    // 保存草稿只校验当前步骤数据
    if (isTemp) {
      return Promise.resolve()
    }

    // 验证所有表单
    return validateAllForm(1).then(() => {
      return Promise.resolve()
    }).catch((params: any) => {
      $infoBox.message.error('数据填写不完整， 请检查后提交')
      return Promise.reject()
    })
  }

  // 新增受益人
  function addCompanyBeneficiaryListFunc(){

    if(!applymentDetailInfo.companyBeneficiaryList){
      applymentDetailInfo.companyBeneficiaryList = [{}]
    }else{

      if(applymentDetailInfo.companyBeneficiaryList.length >= 3){
        return $infoBox.message.error('最多新增三个企业受益人！')
      }

      applymentDetailInfo.companyBeneficiaryList.push({})
    }

  }

  // 删除受益人
  function delCompanyBeneficiaryListFunc(i){
    applymentDetailInfo.companyBeneficiaryList.splice(i, 1)
  }

  // 使用法人信息
  function useBizCompanyBeneficiaryFunc(i){
    applymentDetailInfo.companyBeneficiaryList[i].idcardName = applymentDetailInfo.idcardName
    applymentDetailInfo.companyBeneficiaryList[i].idcardNo = applymentDetailInfo.idcardNo
    applymentDetailInfo.companyBeneficiaryList[i].idcard1Img = applymentDetailInfo.idcard1Img
    applymentDetailInfo.companyBeneficiaryList[i].idcard2Img = applymentDetailInfo.idcard2Img
    applymentDetailInfo.companyBeneficiaryList[i].idcardAddress = applymentDetailInfo.idcardAddress
    applymentDetailInfo.companyBeneficiaryList[i].idcardEffectBegin = applymentDetailInfo.idcardEffectBegin
    applymentDetailInfo.companyBeneficiaryList[i].idcardEffectEnd = applymentDetailInfo.idcardEffectEnd
  }

  // 行业编码选择
  function changeMccFunc (value) {
    if(value[1] && value[1].licenseCode) {
      applymentDetailInfo.industryQualificationType = value[1] && value[1].licenseCode
    }else{
      applymentDetailInfo.industryQualificationType = ''
    }
  }

  function funLegalInfo(value) {
    if(value == '1'){
      // 联系人姓名
      applymentDetailInfo.contactName = applymentDetailInfo.idcardName
      // 联系人手机号
      applymentDetailInfo.contactPhone = applymentDetailInfo.legalPersonPhone
    }else {
      // 联系人姓名
      applymentDetailInfo.contactName = ''
      // 联系人手机号
      applymentDetailInfo.contactPhone = ''
    }
  }

  // 商户所在省市区
  function changeMchAreaFunc(value) {
    if (applymentDetailInfo.address) {
      applymentDetailInfo.address = ''
    }
    applymentDetailInfo.address = value[0].label + '' + value[1].label + '' + value[2]?.label + ''
  }

  // 开户行所在省市区
  function changeBankAreaFunc(value) {
    // applymentDetailInfo.openAccProvince = value[0].label
    // applymentDetailInfo.openAccCity = value[1].label

    // 区编码
    if(value && value[1]) {
      let areaCode = value[1].value
      vdata.bankInfoList = []
      $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, { cityCode: areaCode, bankAliasCode: applymentDetailInfo.settAccountBankName }).then((res) => {
        if(res && res.length) {
          vdata.initBankInfoList = res
          vdata.initBankInfoList.forEach(element => {
            vdata.bankInfoList.push({
              label: element.bankName,
              value: element.bankCode
            })
          })
        }else{
          $infoBox.message.error('该地区下未找到对应银行列表')
        }
      })
    }
  }

  // 备用结算账户 开户行所在省市区
  function changeSettOtherAccountBankBranchAreaCodeFunc(value) {
    // applymentDetailInfo.openAccProvince = value[0].label
    // applymentDetailInfo.openAccCity = value[1].label

    // 区编码
    if(value && value[1]) {
      let areaCode = value[1].value
      vdata.bankInfoList = []
      $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, { cityCode: areaCode, bankAliasCode: applymentDetailInfo.settAccountBankName }).then((res) => {
        if(res && res.length) {
          vdata.initBankInfoList = res
          vdata.initBankInfoList.forEach(element => {
            vdata.bankInfoList.push({
              label: element.bankName,
              value: element.bankCode
            })
          })
        }else{
          $infoBox.message.error('该地区下未找到对应银行列表')
        }
      })
    }
  }

  function changeBankFunc (value) {
    console.log(value)
    if(vdata.initBankInfoList) {
      vdata.initBankInfoList.forEach(element => {
        if(element.bankCode == value) {
          console.log(element)
          applymentDetailInfo.settAccountBankBranchName = element.bankName
          applymentDetailInfo.bankType = element.bankType
          applymentDetailInfo.openAccBanktype = element.bankCode
        }
      })
    }
  }

  $getParamsIsvToBack(mchApplymentData.mchNo, mchApplymentData.ifCode).then((res) => {
    vdata.feeConfig = res
  })

  defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
  .jeepay-tip-text{
    font-size: 10px; color: rebeccapurple
  }
  .option-left {
    width: 50%;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
  }
  .option-right {
    color: rgb(153, 153, 153);
  }
  .option-bottom {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
    color: rgb(153, 153, 153);
  }
  .jeepay-btn-box {
    margin: 15px -12px !important;
  }
  .jeepay-btn-box .ant-btn {
    margin: 0 10px;
  }
</style>
